<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实例方法</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>实例方法</h1>
<hr>
<div id="app">
</div>
<!--销毁需要在挂载组件外面-->
<p>
    <button onclick="destroy()">卸载</button>
</p>
<p>
    <button onclick="forceUpdate()">更新</button>
</p>
<p>
    <button onclick="tick()">修改数据</button>
</p>
<script type="text/javascript">
  //自定义组件
  var fesine = Vue.extend({
    template: `<p>{{message}}</p>`,
    data () {
      return {
        message: '我是自定义组件数据'
      }
    },
    destroyed () {
      console.log('组件被卸载')
    },
    updated () {
      console.log('组件被更新')
    }
  })
  var vm = new fesine().$mount('#app')

  function destroy () {
    //销毁组件
    vm.$destroy()
  }

  function forceUpdate () {
    //销毁组件
    vm.$forceUpdate()
  }

  function tick () {
    vm.message = "update message info ";
    vm.$nextTick(function () {
      console.log('message更新完后我被调用了');
    })
  }
</script>
</body>
</html>